<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/coupon/couponManage/addCoupon/coupon-add.css">
    <script src="/js/public/public.js"></script>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="list">
            <div class="list-left layui-col-md8">
                <div class="list-left-left"></div>
                <p class="list-left-right" id="title">添加优惠券</p>
            </div>
            <div class="list-right layui-col-md4">
                <div class="queryButtonBox">
                    <div class="list-right-left layui-btn layui-icon layui-icon-refresh" onclick="refresh()">&nbsp;刷新</div>
                    <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
                </div>
            </div>
        </div>
    </div>
    <div class="banners layui-col-md12">
        <div class="bannersForm">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">优惠券编号:</label>
                        <div class="layui-input-inline">
                            <input name="couponCode" id="couponCode" placeholder="请输入优惠券编号" class="layui-input" lay-verify="couponCode"  />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">优惠券名称:</label>
                        <div class="layui-input-inline">
                            <input name="couponName" id="couponName" placeholder="请输入优惠券名称" class="layui-input" lay-verify="required"  required />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">上传图片:</label>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="uploadCouponImage">上传图片</button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <div class="layui-progress layui-progress-big" lay-filter="imgProgress" lay-showPercent="yes">
                                <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">图片预览:</label>
                        <div class="layui-input-inline">
                            <img src="http://101.200.239.240:80/group1/M00/00/00/rBmy-mHdLQ-AATi_AAAj37cssag979.png" id="couponImg" >
                            <input type="hidden" name="pricuteUrl" lay-verify="pricuteUrl" id="pricuteUrl" >
                        </div>
                    </div>
                </div>
                <div class="layui-form-item"style="display: inline-block" >
                    <label class="layui-form-label">是否上线：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" lay-verify="required" name="online" id="online">
                            <option value="">请选择</option>
                            <option value="2">上线</option>
                            <option value="3">下线</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">优惠券金额:</label>
                        <div class="layui-input-inline">
                            <input name="couponPrice" id="couponPrice" placeholder="请输入优惠券金额" class="layui-input" lay-verify="couponPrice"  />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间:</label>
                        <div class="layui-input-inline">
                            <input name="startDate" id="startDate" placeholder="请选择开始时间" class="layui-input" lay-verify="required"  required />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间:</label>
                        <div class="layui-input-inline">
                            <input name="endDate" id="endDate" placeholder="请选择结束时间" class="layui-input" lay-verify="required"  required />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item"  style="display: inline-block">
                    <label class="layui-form-label">发放方式：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" lay-verify="required" name="grant" id="grant">
                            <option value="">请选择</option>
                            <option value="2">自动发放</option>
                            <option value="3">活动领取</option>
                            <option value="4">人工发放</option>
                            <option value="5">未定义的</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">发行数:</label>
                        <div class="layui-input-inline">
                            <input name="issueQuantity" id="issueQuantity" placeholder="请选择发行数" class="layui-input" lay-verify="required"  required />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item"  style="display: inline-block">
                    <label class="layui-form-label">图片类型：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" lay-verify="required" name="type" id="type">
                            <option value="">请选择</option>
                            <option value="2">商品</option>
                            <option value="3">视频<option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button type="submit" class="layui-btn" id="submit" lay-filter="sub" lay-submit>立即提交</button>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="used" value="0">
                <input type="hidden" name="createId" id="createId">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['jquery','layer','form','laydate','upload','element'],function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate=layui.laydate;
        var upload=layui.upload;
        var element=layui.element;
        //创建人赋值
        var user = JSON.parse(localStorage.getItem('user'));
        $('#createId').val(user.data.userId);
        //开始时间渲染
        laydate.render({
            elem: '#startDate',
            type: 'datetime',
            trigger: 'click'
        })
        //结束渲染
        laydate.render({
            elem: '#endDate',
            type: 'datetime',
            trigger: 'click'
        })
        //刷新功能
        refresh=function refresh(){
            location.reload();
        }
        var imgFiles;
        var imgIndex;
        var imgUploadCount = 0;
        //上传优惠券图片
        upload.render({
            elem:"#uploadCouponImage",
            url:"/JsUserCoupon/uploadCouponImage",
            field:'couponImage',
            accept:'images',
            size: 2048,
            choose: function(obj){
                imgUploadCount++;
                obj.preview(function(index, file, result){
                    $('#couponImg').attr('src',result);
                    imgIndex = index;
                });
                if(imgUploadCount != 1){
                    delete imgFiles[imgIndex];
                }
                imgFiles = obj.pushFile();
                element.progress('imgProgress', '99%');
            },
            done:function(res){
                if(res.data.code == 200){
                    $('#pricuteUrl').val(res.data.src);
                    element.progress('imgProgress', '100%');
                    layer.msg('上传图片成功');
                }
            }
        })
        //价格、优惠卷编号、图片上传验证
        form.verify({
            couponPrice: function (value, item) {
                if(value == ''){
                    return '请输入价格';
                }
                var regPos = /^[0-9]+.?[0-9]*$/; //非负浮点数
                if(!regPos.test(value)){
                    return '价格必须是数字';
                }
            },
            pricuteUrl: function (value, item) {
                if(value == ''){
                    return '请上传图片';
                }
            },
            couponCode: function(value, item) {
                if(value == ''){
                    return '请输入编号';
                }
                var regPos = /^[0-9]+.?[0-9]*$/; //非负浮点数
                if(!regPos.test(value)){
                    return '编号必须是数字';
                }
                //查询所有输入框 不可以出现同名的优惠券编号
                var couponCodes = getJsUserCouponCode();
                if(couponCodes.length > 0){
                    for (var i = 0; i < couponCodes.length; i++) {
                        if(value == couponCodes[i]){
                            return '优惠券编号不可以重复';
                        }
                    }
                }
            }
        })
        function getJsUserCouponCode(){
            var couponCodes;
            $.ajax({
                url: "/JsUserCoupon/getJsUserCouponCode",
                dataType: "json",
                async: false,
                success:function (data) {
                    couponCodes = data.data;
                }
            })
            return couponCodes;
        }
        //提交按钮
        form.on('submit(sub)', function(data){
            $.ajax({
                url:"/JsUserCoupon/addJsUserCoupon",
                type:"post",
                dataType:"json",
                data:data.field,
                success:function (data) {
                    if(data.data.couponId != null){
                        parent.addTab(51);
                        location.reload();
                    }
                }
            })
            return false;
        });

    })
</script>
</html>